<script setup lang="ts">
/**
 * 系统管理-系统设置-权限管理-编辑权限
 */
import {getMenuListApi} from '@/assets/api/systemManagement/system/menu'
import {onMounted, ref} from 'vue'
import {editPermissionApi} from '@/assets/api/systemManagement/system/permission'
import {ElMessage} from 'element-plus'
import {getMenuSubListByRemarkApi} from "@/assets/api/systemManagement/system/menuSub";
import type {Permission} from "@/components/interface/system/permission";
import type {Menu} from "@/components/interface/system/menu";

const props = defineProps<{
  form: Permission,
  disabled: boolean, // 如果是编辑则禁用部分字段
  echoMenu: string[], // 回显的菜单
  echoMenuSub: string[] // 回显的菜单子表
}>()

const emit = defineEmits(['close', 'save'])

// 获取菜单列表
const menuList = ref([])
const selectedMenu = ref(props.echoMenu)
const getMenuList = () => {
  getMenuListApi().then(res => {
    if (res.data.code === 200) {
      menuList.value = res.data.data.list
      getMenuSubList()
    } else
      ElMessage.error({message: res.data.data, showClose: true})
  })
}

// 级联菜单映射
const menuProps = {
  checkStrictly: true,
  value: 'name',
  label: 'name',
  children: 'children'
}

// 获取菜单子表
const menuSubList = ref([])
const selectedMenuSub = ref(props.echoMenuSub)
const getMenuSubList = () => {
  if (selectedMenu.value.length === 0)
    return
  // 获取关联标识
  let remark = '';
  menuList.value.forEach((item: Menu) => {
    if (item.name === selectedMenu.value[0]) {
      if (item.children.length > 0) {
        item.children.forEach((item: Menu) => {
          if (item.name === selectedMenu.value[1]) {
            remark = item.remark
          }
        })
      } else {
        remark = item.remark
      }
    }
  })
  getMenuSubListByRemarkApi(remark).then(res => {
    if (res.data.code === 200)
      menuSubList.value = res.data.data.list
    else
      ElMessage.error({message: res.data.data, showClose: true})
  })
}

// 表单验证
const formRef = ref()
const menuCascader = (rule: any, value: string, callback: any) => {
  if (selectedMenu.value.length === 0) {
    callback(new Error('请选择菜单'))
  } else {
    callback()
  }
}
const rules = ref({
  permissionName: [{required: true, message: '请输入权限名称', trigger: 'blur'}],
  menuName: [{required: true, validator: menuCascader, trigger: 'blur'}],
  permissionDesc: [{required: true, message: '请输入权限描述', trigger: 'blur'}],
  isParent: [{required: true, message: '请选择是否父级', trigger: 'blur'}]
})


// 保存
const save = async (formEl: any) => {

  if (!formEl) return
  await formEl.validate((valid: boolean) => {
    if (valid) {
      props.form.menuNames = selectedMenu.value.join(',')
      props.form.menuSubNames = selectedMenuSub.value.join(',')
      if (!props.form.permissionName.startsWith('PERM_'))
        props.form.permissionName = 'PERM_' + props.form.permissionName
      editPermissionApi(props.form).then(res => {
        if (res.data.code === 200) {
          ElMessage.success({message: res.data.data, showClose: true})
          emit('save', true)
        } else {
          ElMessage.error({message: res.data.data, showClose: true})
          emit('save', false)
        }
      })
    }
  })
}

onMounted(() => {
  const permissionName = props.form.permissionName
  if (permissionName != undefined)
    props.form.permissionName = permissionName.replace('PERM_', '')
  getMenuList()
})
</script>

<template>
  <div class="form-div">
    <el-form :model="form" label-width="80px" :rules="rules" ref="formRef">
      <el-form-item label="权限名称" prop="permissionName">
        <el-input v-model="form.permissionName" placeholder="请输入权限名称">
          <template #prepend>PERM_</template>
        </el-input>
      </el-form-item>
      <el-form-item label="选择菜单" prop="menuName">
        <el-cascader @change="getMenuSubList" v-model="selectedMenu" :value="echoMenu" :options="menuList"
                     :props="menuProps" clearable/>
      </el-form-item>
      <el-form-item label="菜单子表" prop="menuNameSub">
        <el-cascader v-model="selectedMenuSub" :value="echoMenuSub" :options="menuSubList" :props="menuProps"
                     clearable/>
      </el-form-item>
      <el-form-item label="权限描述" prop="permissionDesc">
        <el-input v-model="form.permissionDesc" placeholder="请输入权限描述"></el-input>
      </el-form-item>
      <el-form-item label="是否父级" prop="isParent">
        <el-radio-group v-model="form.isParent">
          <el-radio :value="0">父级</el-radio>
          <el-radio :value="1">子级</el-radio>
          <el-radio :value="2">操作</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="备注" prop="remark">
        <el-input v-model="form.remark" placeholder="请输入备注"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="save(formRef)">保存</el-button>
        <el-button @click="$emit('close')">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<style scoped>

</style>
